<template>
  <div class="nav">
    <div class="logo"><img :src="logoHref" alt=""></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="#ccc"
      active-text-color="#000"
    >
      <el-menu-item index="1">
        <a href="http://localhost:3000/#/" target="_blank">Dashboard</a>
      </el-menu-item>
      <el-menu-item index="2">
        <a href="https://www.ele.me" target="_blank">Services</a>
      </el-menu-item>
      <el-menu-item index="3">
        <a href="https://www.ele.me" target="_blank">History</a>
      </el-menu-item>
      <el-menu-item index="4">
        <a href="https://www.ele.me" target="_blank">Actions</a>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
// 引入logo
import logo from '../../public/images/index/logo.png'

export default {
  data () {
    return {
      logoHref: logo,
      activeIndex: '1'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scope>
  div.nav{
    margin: 40px 40px;
    padding-left: 120px;
    position: relative;

    // 将logo定位，采用子绝父相
    .logo{
      position: absolute;
      width: 40px;
      top: 0;
      left: 0;
      img{
        width: 100%;
        height: auto;
      }
    }

    //去除饿了么的默认样式
    li.el-menu-item.is-active{
      border-bottom: none;
      text-decoration: none;
      a:hover{
        text-decoration: none;
      }
    }
    .el-menu.el-menu--horizontal{
      border: 0;
    }
  }
</style>
